<template>
<div class="contion">
    <div class="title">
        <b>小红书</b>
    </div>
    <span>你&nbsp;&nbsp;&nbsp; 的&nbsp;&nbsp;&nbsp;  生&nbsp;&nbsp;&nbsp;  活&nbsp;&nbsp;&nbsp;  指&nbsp;&nbsp;&nbsp;  南</span>
    <div class="login">
        <el-form :model="form" ref="formRef" label-width="80px">
            <p>手机号验证：<el-input v-model="form.phone" placeholder="请输入手机号" style="width: 180px"/></p>
            <p>数字验证码：
                <el-input v-model="form.numberCode" placeholder="请输入数字验证码" style="width: 180px;margin-right: 10px"/>
                <el-button type="primary" @click="sendNumberCode" :disabled="isSendingNumberCode">数字验证码</el-button>
            </p>
            <p>短信验证码：<el-input v-model="form.smsCode" placeholder="请输入短信验证码" style="width: 180px;margin-right: 10px"/>
                <el-button type="primary" @click="verifyNumberCodeAndSendSms" :disabled="!form.numberCode">
                    短信验证码
                </el-button>
            </p>
                <el-button class="button" @click="login">登录</el-button>
            </el-form>
            <!-- <a href="http://127.0.0.1:8000/ding/">使用钉钉登录</a> -->
            <div class="ding">
                <span style="margin-left:100px;margin-top:20px;"><b>其他登录方式</b></span>
                <div>
                    <img src="../img/1.webp" @click="goToDingTalkLogin"/>
                </div>
            </div>
    </div>
</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import axios from 'axios';
import router from '../router';
import http from '../http';


// 表单数据
const form = reactive({
phone: '',
numberCode: '',
smsCode: ''
});
const formRef = ref(null);

// 获取数字验证码状态
const isSendingNumberCode = ref(false);
// 数字验证码倒计时
const numberCodeCountdown = ref(60);

// 获取数字验证码
const sendNumberCode = async () => {
if (!form.phone) {
    alert('请输入手机号');
    return;
}

try {
    const response = await axios.get('http://127.0.0.1:8000/send/', {
    params: {
        phone: form.phone
    }
    });
    alert(response.data.code)
    console.log(response.data);
} catch (error) {
    console.error('获取数字验证码失败:', error);
    clearInterval(timer);
    isSendingNumberCode.value = false;
    numberCodeCountdown.value = 60;
}
};

// 验证数字验证码并发送短信验证码
const verifyNumberCodeAndSendSms = async () => {
if (!form.phone || !form.numberCode) {
    alert('请输入手机号和数字验证码');
    return;
}
try {
    const response = await axios.post('http://127.0.0.1:8000/send/', {
    phone: form.phone,
    code: form.numberCode
    });
    console.log(response.data);
    if (response.data.code == 200) {
        ElMessage.success('短信验证码发送成功，请查收');
        alert(response.data.codes)
    isSendingNumberCode.value = true;
let timer = setInterval(() => {
    if (numberCodeCountdown.value > 0) {
    numberCodeCountdown.value--;
    } else {
    clearInterval(timer);
    isSendingNumberCode.value = false;
    numberCodeCountdown.value = 60;
    }
}, 1000);
    } else {
    alert(response.data.msg);
    }
} catch (error) {
    console.error('数字验证码或发送短信验证码失败:', error);
    alert('验证数字验证码或发送短信验证码失败，请重试');
}
};

// 登录
const login = async () => {
if (!form.phone || !form.smsCode) {
    alert('请输入手机号和短信验证码');
    return;
}
try {
    const response = await axios.post('http://127.0.0.1:8000/login/', {
    phone: form.phone,
    code: form.smsCode
    });
    console.log(response.data);
    if (response.data.code == 200) {
    localStorage.setItem('userid', response.data.id);
    localStorage.setItem('token', response.data.token);
    localStorage.setItem('retoken', response.data.retoken);
    ElMessage.success('登录成功');
    router.push('/')

    // alert('登录成功，token: ' + response.data.token);
    } else {
    alert(response.data.msg);
    }
} catch (error) {
    console.error('登录失败:', error);
    alert('登录失败，请重试');
}
};

const goToDingTalkLogin = () => {
    http.get('/ding/').then(res=>{
        window.location.href = res.data.url
})
}



</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.title{
    font-size: 70px;
    color: #FF2442;
    margin-top: 50px;
}

.ding{
    display: flex;
}

.login{
    margin-top: 200px;
}

.ding img{
    margin-left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-top: 10px;
}

.button{
    width:340px;
    height: 50px;
    border-radius: 30px;
    background-color: #FF2442;
    color:#FFFFFF;
}
</style>